<template>
  <el-tree ref="treeRef" :data="treeData" :props="defaultProps" node-key="name" show-checkbox
    :default-expanded-keys="['all']" :default-checked-keys="modelValue" @check-change="onChange">
  </el-tree>
</template>

<script setup>
import MenuData from '@/layout/menuData'
import { ref } from 'vue';

defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['update:modelValue']);

const treeData = [
  {
    title: '全部',
    name: 'all',
    children: MenuData,
  },
]
const defaultProps = {
  children: 'children',
  label: 'title',
};

const treeRef = ref(null);
const onChange = () => {
  const list = treeRef.value?.getCheckedKeys(true) || [];
  console.log(list);
  emit('update:modelValue', list);
};
</script>